<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<!-- 引入Bootstrap -->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

		<!-- bootstrap的javascript插件--需要引用jQuery -->
		<script src="bootstrap/js/jquery.min.js"></script>

		<!--包括所有已编译的插件-->
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<p>
				<h3 class="text-primary">表单控件状态</h3>
				除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式
				，并提供了表单验证的 class。

				<h4>1,输入框焦点</h4>
				当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

				<h4>2,禁用的输入框 input</h4>
				如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，
				还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

				<h4>3,禁用的字段集 fieldset</h4>
				对 fieldset 添加 disabled 属性来禁用 fieldset 内的所有控件。

				<h4>4,验证状态</h4>
				Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的
				class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
				<form class="form-horizontal" role="form">
					<div class="form-group">
						<label class="col-sm-2 control-label">聚焦</label>
						<div class="col-sm-10">
							<input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点...">
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword" class="col-sm-2 control-label">禁用 </label>
						<div class="col-sm-10">
							<input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
						</div>
					</div>
					<fieldset disabled>
						<div class="form-group">
							<label for="disabledTextInput" class="col-sm-2 control-label">
								禁用输入（Fieldset disabled） </label>
							<div class="col-sm-10">
								<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
							</div>
						</div>
						<div class="form-group">
							<label for="disabledSelect" class="col-sm-2 control-label">
								禁用选择菜单（Fieldset disabled） </label>
							<div class="col-sm-10">
								<select id="disabledSelect" class="form-control">
									<option>禁止选择</option>
								</select>
							</div>
						</div>
					</fieldset>
					<div class="form-group has-success">
						<label class="col-sm-2 control-label" for="inputSuccess">
							输入成功 </label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="inputSuccess">
						</div>
					</div>
					<div class="form-group has-warning">
						<label class="col-sm-2 control-label" for="inputWarning">
							输入警告 </label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="inputWarning">
						</div>
					</div>
					<div class="form-group has-error">
						<label class="col-sm-2 control-label" for="inputError">
							输入错误 </label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="inputError">
						</div>
					</div>
				</form>
			</p>

			<p>
				<h3 class="text-primary">表单控件大小</h3>
				您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。
				<form role="form">
					<div class="form-group">
						<input class="form-control" type="text" placeholder="默认输入">
					</div>

					<div class="form-group">
						<input class="form-control input-lg" type="text" placeholder=".input-lg">
					</div>

					<div class="form-group">
						<input class="form-control input-sm" type="text" placeholder=".input-sm">
					</div>

					<div class="form-group">
					</div>

					<div class="form-group">
						<select class="form-control">
							<option value="">默认选择</option>
						</select>
					</div>

					<div class="form-group">
						<select class="form-control input-lg">
							<option value="">.input-lg</option>
						</select>
					</div>

					<div class="form-group">
						<select class="form-control input-sm">
							<option value="">.input-sm</option>
						</select>
					</div>

					<div class="row">
						<div class="col-lg-2">
							<input type="text" class="form-control" placeholder=".col-lg-2">
						</div>
						<div class="col-lg-3">
							<input type="text" class="form-control" placeholder=".col-lg-3">
						</div>
						<div class="col-lg-4">
							<input type="text" class="form-control" placeholder=".col-lg-4">
						</div>
					</div>
				</form>
			</p>

			<p>
				<h3 class="text-left text-primary">表单帮助文本</h3>
				Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块
				，请在 input 后使用 .help-block。
				<form role="form">
					<span>帮助文本实例</span>
					<input class="form-control" type="text" placeholder="">
					<span class="help-block">
						一个较长的帮助文本块，超过一行,	需要扩展到下一行。本实例中的帮助文本总共有两行。
					</span>
				</form>
			</p>
		</div>

	</body>
</html>
